<!--
 * @Author: wangwenshuai 644586996@qq.com
 * @Date: 2022-11-14 16:30:18
 * @LastEditors: wangwenshuai 644586996@qq.com
 * @LastEditTime: 2022-11-14 16:32:03
 * @FilePath: \carbon-pccounting-project\src\components\Index\project.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="project_box">
    <transition name="slide-fade">
      <div class="project" v-show="projectShow">
        <div class="title">什么是后羿零碳?</div>
        <div class="text">
          后羿零碳是一款可将公司和客户联系在一起的客户关系管理解决方案。后羿零碳
          是一个集成 CRM
          平台，可以为您的所有部门（包括营销部门、销售部门、商务部门和服务部门）提供所有客户的单一共享视图。
        </div>
        <div class="free" @click="toPath()">体验版</div>
        <div class="Experience">
          <div class="Experience_img_a" v-show="deviceType == 'desktop' || deviceType == 'tablet'">
            <img src="@/assets/img/a.png" />
          </div>
          <div class="Experience_img_b">
            <img src="@/assets/img/b.png" />
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { Mixin } from "@/mixins/mixin.js";
export default {
  mixins: [Mixin],
  props: ["projectShow"],
  methods: {
    toPath() {
      this.$router.push("/carbonaccounting");
    }
  }
};
</script>

<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .project_box {
    min-height: 845px;
    width: 100%;
    background: url("../../assets/img/back.png") no-repeat;
    background-size: 100% 450px;
    background-position: 0 100%;
    .project {
      max-width: 1280px;
      margin: auto;

      .title {
        font-family: "Roboto-Black-1";
        font-weight: 400;
        font-size: 52px !important;
        line-height: 60px !important;
        margin-bottom: 20px;
      }
      .text {
        // width: 100%;

        font-family: "Roboto-Italic-9";
        padding: 0 200px;
        text-align: center;
        line-height: 24px;

        font-size: 15px;
      }
      .free {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        text-decoration: none;
        font-size: 22px;
        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 16px 40px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
        font-weight: 600;
        line-height: 1;
        margin: 40px 0 30px;
        background-image: linear-gradient(
          270deg,
          rgba(23, 164, 240, 0.35),
          #0e7ae6,
          #0b5cab,
          rgba(23, 164, 240, 0.35)
        );
        background-size: 200% 100%;
        color: #fff;
        cursor: pointer;
        transition: background-position 0.8s;
        &:hover {
          background-position: 100% 50%;
        }
      }
      .Experience {
        margin-top: 50px;
        padding-bottom: 60px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        .Experience_img_a {
          width: 700px;
          height: 400px;

          img {
            width: 100%;
            height: 350px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 2px 2px 10px rgb(124, 124, 124);
          }
        }
        .Experience_img_b {
          width: 200px;
          height: 400px;
          margin-top: 50px;
          margin-left: -50px;
          img {
            width: 100%;
            height: 350px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 2px 2px 10px rgb(124, 124, 124);
          }
        }
      }
    }
  }
}
@media screen and (min-width: 993px) and (max-width: 1199px) {
  .project_box {
    min-height: 845px;
    width: 100%;
    background: url("../../assets/img/back.png") no-repeat;
    background-size: 100% 450px;
    background-position: 0 100%;
    .project {
      max-width: 1280px;
      margin: auto;

      .title {
        font-family: "Roboto-Black-1";
        font-weight: 400;
        padding: 0 30px;
        font-size: 40px !important;
        line-height: 60px !important;
        margin-bottom: 20px;
      }
      .text {
        // width: 100%;

        font-family: "Roboto-Italic-9";
        padding: 0 200px;
        text-align: center;
        line-height: 24px;

        font-size: 15px;
      }
      .free {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        text-decoration: none;
        font-size: 22px;
        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 16px 40px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
        font-weight: 600;
        line-height: 1;
        margin: 40px 0 30px;
        background-image: linear-gradient(
          270deg,
          rgba(23, 164, 240, 0.35),
          #0e7ae6,
          #0b5cab,
          rgba(23, 164, 240, 0.35)
        );
        background-size: 200% 100%;
        color: #fff;
        cursor: pointer;
        transition: background-position 0.8s;
        &:hover {
          background-position: 100% 50%;
        }
      }
      .Experience {
        margin-top: 50px;
        padding-bottom: 60px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        .Experience_img_a {
          width: 700px;
          height: 400px;

          img {
            width: 100%;
            height: 350px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 2px 2px 10px rgb(124, 124, 124);
          }
        }
        .Experience_img_b {
          width: 200px;
          height: 400px;
          margin-top: 50px;
          margin-left: -50px;
          img {
            width: 100%;
            height: 350px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 2px 2px 10px rgb(124, 124, 124);
          }
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
  .project_box {
    min-height: 845px;
    width: 100%;
    background: url("../../assets/img/back.png") no-repeat;
    background-size: 100% 450px;
    background-position: 0 100%;
    .project {
      max-width: 1280px;
      margin: auto;

      .title {
        font-family: "Roboto-Black-1";
        font-weight: 400;
        font-size: 22px !important;
        line-height: 60px !important;
        margin-bottom: 20px;
            font-weight: 400;
      }
      .text {
        // width: 100%;

        font-family: "Roboto-Italic-9";
        padding: 0 200px;
        text-align: center;
        line-height: 24px;

        font-size: 15px;
      }
      .free {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        text-decoration: none;
        font-size: 22px;
        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 16px 40px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
        font-weight: 600;
        line-height: 1;
        margin: 40px 0 30px;
        background-image: linear-gradient(
          270deg,
          rgba(23, 164, 240, 0.35),
          #0e7ae6,
          #0b5cab,
          rgba(23, 164, 240, 0.35)
        );
        background-size: 200% 100%;
        color: #fff;
        cursor: pointer;
        transition: background-position 0.8s;
        &:hover {
          background-position: 100% 50%;
        }
      }
      .Experience {
        margin-top: 50px;
        padding-bottom: 60px;
        display: flex;
        padding: 0 20px;
        flex-direction: row;
        justify-content: center;
        .Experience_img_a {
          width: 700px;
          height: 400px;

          img {
            width: 100%;
            height: 350px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 2px 2px 10px rgb(124, 124, 124);
          }
        }
        .Experience_img_b {
          width: 200px;
          height: 400px;
          margin-top: 50px;
          margin-left: -50px;
          img {
            width: 100%;
            height: 350px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 2px 2px 10px rgb(124, 124, 124);
          }
        }
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .project_box {
    min-height: 0px;
    width: 100%;
    background: url("../../assets/img/back.png") no-repeat;
    background-size: 100% 450px;
    background-position: 0 100%;
    background: #fff;
    .project {
      width: 100%;
      margin: auto;

      .title {
        font-family: "Roboto-Black-1";
        font-weight: 400;
        font-size: 24px !important;
        line-height: 60px !important;
        padding-top: 20px;
        margin-bottom: 20px;
      }
      .text {
        // width: 100%;

        font-family: "Roboto-Italic-9";
        padding: 0px 20px;
        text-align: center;
        line-height: 24px;

        font-size: 15px;
      }
      .free {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        text-decoration: none;
        font-size: 22px;
        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 16px 40px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
        font-weight: 600;
        line-height: 1;
        margin: 20px 0 20px;
        background-image: linear-gradient(
          270deg,
          rgba(23, 164, 240, 0.35),
          #0e7ae6,
          #0b5cab,
          rgba(23, 164, 240, 0.35)
        );
        background-size: 200% 100%;
        color: #fff;
        cursor: pointer;
        transition: background-position 0.8s;
        &:hover {
          background-position: 100% 50%;
        }
      }
      .Experience {
        margin-top: 40px;
        padding-bottom: 0px;
        padding:  0 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // width: 100%;
        .Experience_img_a {
          width: 100%;
          height: auto;
          margin-top: 0px;
          img {
            width: 100%;
            height: auto;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 2px 2px 10px rgb(124, 124, 124);
          }
        }
        .Experience_img_b {
          height: auto;
          width: 50%;
          margin: 0;

          img {
            height: auto;
            width: 100%;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 2px 2px 10px rgb(124, 124, 124);
          }
        }
      }
    }
  }
}
.slide-fade-enter-active {
  transition: all 1s ease !important;
}
.slide-fade-leave-active {
  transition: all 1s cubic-bezier(1, 0.5, 0.8, 1) !important;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateY(100px) !important;
  opacity: 1;
}
</style>